<template>
  <div ref="index_chart" style="width:100%;height:450px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "IndexChart",
  props: {
    xData: {
      type: Array,
      default: () => []
    },
    yData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myChart: null,
      config: {
        tooltip: {
          trigger: "axis"
        },
        legend: {},
        title: {
          text: "过去十天每天数据信息变化"
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.xData
        },
        yAxis: {
          type: "value"
        },
        series: this.yData
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.index_chart);
    },
    setOption() {
      this.myChart.setOption(this.config);
    }
  },
  watch: {
    yData: {
      handler: function(newVal, oldVal) {
        if (newVal != null) {
          this.config.xAxis.data = this.xData;
          this.config.series = newVal;
          this.setOption();
        }
      },
      deep: true
    }
  }
};
</script>

<style scoped>
</style>